<template>
    <view class="change-theme">
        <view class="modal">
            <view class="title">主题</view>
            <input type="text" value="" maxlength="12" placeholder="为你的相册取一个名字吧" v-model="themeName" />
            <view class="btns">
                <view class="" @click="cancel">取消</view>
                <view class="save" @click="save">保存</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            themeName: ''
        };
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    computed: {},
    onLoad() {},
    onShow() {},
    methods: {
        cancel(){
            this.$emit('cancel')
        },
        save(){
            this.$emit('save',this.themeName)
        }
    },
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.change-theme {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
    .modal {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        // width: 560rpx;
        // height: 309rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        .title {
            padding: 40rpx;
            font-size: 34rpx;
            line-height: 34rpx;
        }
        input {
            padding: 10rpx 40rpx 58rpx;
            font-size: 30rpx;
            line-height: 30rpx;
        }
        .btns {
            position: relative;
            width: 560rpx;
            height: 99rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 0 0 10rpx 10rpx;
            border-top: 1rpx solid #e9ebf3;
            color: #abb3b8;
            font-size: 30rpx;
            line-height: 30rpx;
            view {
                display: flex;
                justify-content: center;
                flex-grow: 1;
            }
            &::after{
                position: absolute;
                left: 50%;
                top: 0;
                width: 2rpx;
                height: 100%;
                content: '';
                background: #e9ebf3;
                transform: translate(-50%);
            }
            .save{
                color: #20bf64;
            }
        }
    }
}
</style>
